<template>
    <div v-loading="loading" class="console-page">
        <el-form inline :model="searchForm" class="e-page form-item" spellcheck="false" @submit.native.prevent>
            <el-row class="toolbar" ref="el">
                <el-col :span="4" style="padding-right: 5px">
                    <el-input v-model="searchForm.title" placeholder="请输入文章标题" clearable class="input-auto-resize" />
                </el-col>
                <el-col :span="4" style="padding-right: 5px">
                    <el-select v-model="searchForm.type" clearable placeholder="请选择文章分类" class="input-auto-resize">
                        <el-option v-for="item in type" :key="item" :label="item" :value="item">
                        </el-option>
                    </el-select>
                </el-col>
                <el-col :span="4" style="padding-right: 5px">
                    <el-select v-model="searchForm.status" clearable placeholder="请选择状态" class="input-auto-resize">
                        <el-option v-for="item in statusSelect" :key="item.value" :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-col>
                <el-col :span="4" style="padding-right: 5px">
                    <el-button type="primary" @click="searchTable" circle :icon="getIcon('search')"
                        :loading="bt_loading" class="button-auto-resize" native-type="submit" />
                </el-col>
                <el-col :span="8" style="text-align: right">
                    <el-button :icon="getIcon('link')" circle class="button-auto-resize" @click="cache" />
                    <el-button :icon="getIcon('plus')" circle class="button-auto-resize" @click="addArticle" />
                </el-col>
            </el-row>
        </el-form>
        <el-table :data="tableData" border header-cell-class-name="el-table-header-cell" cell-class-name="el-table-cell"
            class="e-page table-with-pagination" highlight-current-row>
            <el-table-column prop="sequence" label="序列号" :width="fontAutoResize.size_20.value" />
            <el-table-column prop="title" label="文章标题" min-width="400" />
            <el-table-column prop="type" label="分类" :width="fontAutoResize.size_10.value" />
            <el-table-column prop="source" label="创作类型" :width="fontAutoResize.size_8.value">
                <template #default="scope">
                    <!-- 状态 -->
                    <el-tag :type="scope.row.source === 1 ? 'primary' : 'info'" class="button-auto-resize"
                        disable-transitions>{{
                            scope.row.source === 1 ? '原创' : '转载' }}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="status" label="状态" :width="fontAutoResize.size_8.value">
                <template #default="scope">
                    <!-- 状态 -->
                    <el-tag :type="scope.row.status === 1 ? 'primary' : 'danger'" class="button-auto-resize"
                        disable-transitions>{{
                            scope.row.status === 1 ? '发布' : '草稿' }}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="crtTime" label="创建时间" :width="fontAutoResize.size_11.value" />
            <el-table-column prop="updateTime" label="更新时间" :width="fontAutoResize.size_11.value" />
            <el-table-column fixed="right" label="操作" :width="operationWidth" className="operation-column">
                <template #default="scope">
                    <el-button type="primary" :icon="getIcon('EditPen')" circle class="button-auto-resize"
                        @click="editArticle(scope.row)" />
                    <el-button type="primary" :icon="getIcon('Tickets')" circle class="button-auto-resize"
                        @click="previewArticle(scope.row)" :disabled="scope.row.status !== 1" />
                    <el-button type="danger" :icon="getIcon('Delete')" circle class="button-auto-resize"
                        :confirmTitle="`确认删除该文章 [ ${scope.row.title} ] ?`" @click="deleteArticle(scope.row.sequence)" />
                </template>
            </el-table-column>
        </el-table>
        <div style="height: 50px;">
            <el-pagination background @size-change="SizeChange" @current-change="CurrentChange"
                :current-page="currentPage" :page-sizes="page_sizes" :page-size="page_size"
                layout="total, sizes, prev, pager, next, jumper" prev-text="<上一页" next-text="下一页>" :total="total"
                class="e-page">
            </el-pagination>
        </div>
    </div>
</template>

<script setup>
import router from '@/router'
import { useElMessage, useSetTableOperationWidth, useRequest } from "@usehook"
import { getIcon } from "@/utils/tools"
import { fontAutoResize } from "@/utils/setting"
import storeInstance from "@/pinia"

const { tagMenuStore } = storeInstance
const operationWidth = useSetTableOperationWidth(3)
let tableData = $ref([])
let currentPage = $ref(1)
let page_size = $ref(0)
let total = $ref(0)
let statusSelect = $ref([{ value: 1, label: '发布' }, { value: 0, label: '草稿' }])
let searchForm = $ref({ title: '', status: 1, type: '' })
let loading = $ref(false)
let bt_loading = $ref(false)
let page_sizes = [10, 30, 50, 100, 200]
let type = $ref([])

const deleteArticle = (sequence) => {
    for (let tagMenu of tagMenuStore.getTagMenu) {
        if (tagMenu.path === "/note/detail?sequence=" + sequence) {
            tagMenuStore.closeTagMenu(tagMenu)
        }
    }
    for (let tagMenu of tagMenuStore.getTagMenu) {
        if (tagMenu.path === "/note/preview?sequence=" + sequence) {
            tagMenuStore.closeTagMenu(tagMenu)
        }
    }
    useRequest({ url: "/article/delete", method: "post", sequence }).then(e => {
        if (e && e.status) {
            useElMessage("删除" + e.data + "篇文章及缓存信息")
            refreshTable()
        }
    })
}

const addArticle = () => {
    tagMenuStore.setTitle("new")
    router.push("/note/detail")
}

const cache = () => {
    useRequest({ url: "/article/cache" }).then(e => {
        if (e && e.status) {
            useElMessage("成功生成" + e.data + "篇已发布文章的缓存数据")
        }
    })
}

const editArticle = (row) => {
    tagMenuStore.setTitle(row.title)
    router.push("/note/detail?sequence=" + row.sequence)
}

const previewArticle = (row) => {
    tagMenuStore.setTitle(row.title)
    router.push("/note/preview?sequence=" + row.sequence)
}

const getArticle = (params) => {
    loading = true
    bt_loading = true
    useRequest(params).then(resData => {
        if (resData) {
            if (resData.status) { //0表示成功，1表示失败
                tableData = resData.data
                total = resData.totalRecord
            } else {
                if (resData.message) useElMessage(resData.message)
            }
        }
    }).finally(_ => {
        loading = false
        bt_loading = false
    })
}

const searchTable = () => {
    getArticle({
        url: "/article/list", search: JSON.stringify(searchForm), limit: page_size, page: 1
    });
    currentPage = 1
}

const refreshTable = () => {
    setTimeout(() => {
        getArticle({
            url: "/article/list", search: JSON.stringify(searchForm), limit: page_size, page: currentPage
        });
    }, 200)
}

const SizeChange = (val) => {
    getArticle({
        url: "/article/list", search: JSON.stringify(searchForm), limit: val, page: currentPage
    });
    page_size = val
}

const CurrentChange = (val) => {
    getArticle({
        url: "/article/list", search: JSON.stringify(searchForm), limit: page_size, page: val
    });
    currentPage = val
}

onMounted(() => {
    page_size = page_sizes[1];
    getArticle({
        url: "/article/list", search: JSON.stringify(searchForm), limit: page_size, page: currentPage
    })

    useRequest({ url: '/article/type' }).then(e => {
        if (e && e.status) {
            type = e.data
        }
    })
})
</script>